<template>
  <n-layout
    class="ie-layout"
    position="absolute"
    has-sider
  >

    <!-- SIDEBAR -->
    <n-layout-sider
      collapse-mode="width"
      :collapsed-width="64"
      :width="250"
      :collapsed="collapsed"
      @collapse="collapsed = true"
      @expand="collapsed = false"
      show-trigger
      bordered
    >
      <div :class="['logo', { 'logo--collapsed': collapsed }]">
        <transition name="fade" mode="out-in">
          <img v-if="collapsed" src="/static/image/logo-collapse.png" alt="">
          <img v-else src="/static/image/logo.png" alt="">
        </transition>
      </div>

      <!-- SIDEBAR MENU -->
      <sidebar :collapsed="collapsed" />

      <!-- COPYRIGHT -->
      <transition name="fade" mode="out-in">
        <div class="copyright" v-show="!collapsed">
          &copy; 山东佰联达智能科技有限公司
        </div>
      </transition>
    </n-layout-sider>
    <n-layout>

      <!-- HEADER -->
      <n-layout-header
        style="height: 90px; display: flex; padding: 0 24px;"
        bordered
      >
        <div class="ie-layout-nav">
          <n-select
            filterable
            placeholder="搜索"
            :options="searchOptionsRef"
            :loading="searchLoading"
            style="width: 240px;"
            size="large"
            clearable
            remote
            @search="handleSearch"
            @update:value="v => $router.push(v)"
          />
        </div>
        <div class="ie-layout-nav-end" v-if="store.isLogined">
          <n-avatar
            :size="40"
            round
            :src="store.userInfo.avatar || '/static/image/default-avatar.png'">
          </n-avatar>
          <n-dropdown
            @select="handleSelect"
            trigger="click"
            :options="options"
          >
            <table class="nav-avatar-desc">
              <tbody>
                <tr><th>{{ store.userInfo.username }}</th></tr>
                <tr><td><n-text depth="1">{{ store.userInfo.role?.rolename }}</n-text></td></tr>
              </tbody>
            </table>
          </n-dropdown>
          <n-popconfirm
            :on-positive-click="logout"
            placement="bottom-end"
          >
            请确定是否退出？
            <template #trigger>
              <n-button style="margin-left: 12px;" text>退出</n-button>
            </template>
          </n-popconfirm>
        </div>
      </n-layout-header>

      <!-- CONTENT -->
      <n-layout-content
        style="height: calc(100% - 90px);"
        content-style="background-color: #F5F5FA;"
      >
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { trim } from 'lodash-es'

import { useStore } from '/@/store'
import {
  NLayout,
  NLayoutContent,
  NLayoutHeader,
  NLayoutSider
} from 'naive-ui'
import Sidebar from '/@/components/menu/Sidebar.vue'

import { menuOptions } from '/@/router'

const collapsed = ref(false)

const store = useStore()
const router = useRouter()

function logout() {
  store.setUser()
  router.push('/login')
}

const searchOptions = []

function walker(
  item,
  options = []
) {
  const {
    rawTitle: title,
    parentTitle = '',
    key,
    children = []
  } = item || {}
  const label = parentTitle
    ? [parentTitle, title].join(' - ')
    : title

  if (children.length) {
    children.forEach(subItem => walker({
      ...subItem,
      parentTitle: label
    }, options))
  } else {
    options.push({
      label,
      value: key
    })
  }

  return options
}

menuOptions.forEach(v => walker(v, searchOptions))

const searchLoading = ref(false)
const searchOptionsRef = ref(searchOptions)

function handleSearch(keyword) {
  const trimed = trim(keyword)

  if (!trimed.length) {
    searchOptionsRef.value = searchOptions
    return
  }

  searchLoading.value = true
  window.setTimeout(() => {
    searchOptionsRef.value = searchOptions.filter(({ label }) => label.indexOf(trimed) > -1)
    searchLoading.value = false
  }, 5e2)
}

const options = [
  { label: '修改密码', key: 'resetpwd' }
]

function handleSelect(key) {
  if (key === 'resetpwd') {
    router.push({ name: 'ResetPwd' })
  }
}
</script>

<style lang="less">
.ie-layout-nav {
  padding-top: 24px;
  flex: 1;

  &-end {
    display: flex;
    align-items: center;

    .nav-avatar-desc {
      margin-left: 20px;
      margin-right: 8px;
      text-align: left;
      border-collapse: separate;
      border-spacing: 0;
      text-align: center;

      th, td {
        line-height: 18px;
      }
    }
  }
}

.ie-layout {

  .logo {
    height: 48px;
    margin: 25px 40px 20px 30px;
    transition: height .3s var(--bezier), margin .3s var(--bezier);

    &--collapsed {
      height: 32px;
      margin: 30px 17px 28px;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .n-menu {
    min-height: calc(100vh - 166px);
  }

  .copyright {
    color: #808191;
    font-size: 12px;
    text-align: center;
    height: 70px;
    line-height: 30px;
    padding: 20px 5px;
    white-space: nowrap;
  }
}
</style>